<template>
	<div class="space-auth-container">
		<div class="list">
            <CustomTableTwo
                id="authList"
                class="auth-list"
                :table-config="tableConfig" 
                :is-show-pagination="false" 
                :search-callback="searchCallback"
                :is-refresh="isRefresh"
                @selection-change="selectionChange"
            >
                <template #statusText="scope">
                    <el-tooltip
                        effect="dark"
                        :content="scope.scope.row.audit_comment"
                        placement="top"
                        popper-class="space-auth-status-tip"
                        v-if="scope.scope.row.status == 'declined'"
                    >
                        <span>{{ statusMap[scope.scope.row.status] }}<el-icon v-if="scope.scope.row.status == 'declined'" class="el-icon--right"><WarningFilled /></el-icon></span>
                    </el-tooltip>
                    <template v-else>
                        {{ statusMap[scope.scope.row.status] }}
                    </template>
                </template>
            </CustomTableTwo>
        </div>
        <AuthApprovalVue ref="authRef" @handle-submit="handleAuthDeny"/>
	</div>
</template>
<script setup lang="ts">
import { appAuthList, appBacthPass, appDeny, appPass } from '@/ajax/index';
import CustomTableTwo from '@/components/CustomTableTwo.vue';
import { dateFormat, FormatsEnums } from '@/utils/dateUtil';
import { getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';
import AuthApprovalVue from './modules/authApproval.vue';

const { proxy } = getCurrentInstance() as any;
const activeName = ref('authApply')
const checkedRows = ref([])

let router = useRouter()

const tableConfig = ref({})
const isRefresh = ref(false)

//type：0-全部授权 1-授权通过        
const submit = (type: number, data: any) => {
    const msgLabel = {
        0: "全部授权通过",
        1: "通过"
    }
    ElMessageBox.confirm(
        `确定要${msgLabel[type]}吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        let res = {
            succ: false
        }
        if (type == 0) {
            res = await appBacthPass({})
        }
        if (type == 1) {
            res = await appPass({id: data.id})
        }
        if (res.succ) {
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            isRefresh.value = true
            nextTick(()=>{
                isRefresh.value = false
            })
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '您已取消操作',
        })
    })
}
//批量通过
const batchToAuthPass = () => {
    const ids = []

    checkedRows.value.forEach((item:any) => {
        ids.push(item.id) 
    });
    submit(0, checkedRows)
}
//单条通过
const authPass = (row: any) => {
    submit(1, row)
}
const authRef = ref()
//单条拒绝
const authCancel = (row: any) => {
    const info = {
        id: row.id,
        audit_comment: ''
    }
    authRef.value.init(info)
}
const handleAuthDeny = async (data: any) => {
    const res = await appDeny(data.value)
    if (res.succ) {
        ElMessage({
            type: 'success',
            message: '操作成功',
        })
        authRef.value.handleClose()
        isRefresh.value = true
        nextTick(()=>{
                isRefresh.value = false
        })
    }
}
//多选框勾选回调
const selectionChange = (checked: any) => {
    checkedRows.value = checked
}

const statusMap = {
    approved: "已通过",
    declined: "已驳回",
    // requesting: "请求中",
}
tableConfig.value = {
    // 表格顶部的操作按钮
    'actionBtns': [
        {
            'type': `primary`, // 按钮类型
            'icon': ``, // 按钮上的图标
            'label': `全部授权通过`, // 按钮展示的文字
            'isRefresh': false, // 执行完事件是否刷新页面
            'btnCallback': batchToAuthPass // 事件回调
        }
    ],
    'isRefresh': false,
    // 表格展示配置
    'tableHeader': [
        {
            'label': `序号`,
            'prop': `request_org`,
            width:`180px`
        },
        {
            'label': `申请授权应用`,
            'prop': `app`,
            width:`180px`
        },
        // {
        //     'label': `申请授权算法`,
        //     'prop': `algorithm`,
        //     width:`180px`
        // },
        // {
        //     'label': `授权数据对象`,
        //     'prop': `data_object`,
        //     width:`320px`
        // },
        {
            'label': `申请授权数据范围`,
            'prop': `data_range`,
            width:`160px`
        },
        {
            'label': `业务用途`,
            'prop': `purpose`,
            width:`160px`
        },
        {
            'label': `申请授权算符`,
            'prop': `operator_text`,
            width:`140px`
        },
        {
            'label': `是否申请拷贝`,
            'prop': `is_copyable_text`,
            width:`140px`
        },
        {
            'label': `申请授权截止时间`,
            'prop': `permission_end`,
             width:`140px`
        },
        {
            'label': `申请人`,
            'prop': `request_user`,
             width:`140px`
        },
        {
            'label': `申请时间`,
            'prop': `request_time_text`,
             width:`140px`
        },
        {
            'label': `操作`,
            'prop': `id`,
            fixed:  `right`,
            'width': 110,
            'btns': [
                {
                    'label': `通过`,
                    'btnCallback': authPass,
                    isRefresh:false,
                    'hide': (row: any) => {
                        return statusMap.hasOwnProperty(row.status)
                    }
                },
                {
                    'label': `驳回`,
                    'btnCallback': authCancel,
                    isRefresh:false,
                    'hide': (row: any) => {
                        return statusMap.hasOwnProperty(row.status)
                    }
                },
                {
                    // 'textCallback': (row: any) => {
                    //     if (statusMap.hasOwnProperty(row.status)) {
                    //         return statusMap[row.status]
                    //     }
                    // },
                    'slot': 'statusText',
                    'btnCallback': () => {},
                    'hide': (row: any) => {
                        return !statusMap.hasOwnProperty(row.status)
                    },
                    'style': (row: any) => {
                        return row.status == 'approved' ? 'color:#61C200' : 'color:#DF1616'
                    }
                }
            ]
        },        
    ],

}
const operatorMap = {
    all: "全部"
}

const searchCallback = async () => {
    const params = {
        pageNumber:1,
        pageSize:1000
    }
    try {
        const res = await appAuthList(params) 
        let list = res.content.data.requests || []
        if (!res.succ) {
            return
        }
        for (let index = 0; index < list.length; index++) {
            const element = list[index];
            list[index].request_time_text = dateFormat(element.request_time, FormatsEnums.YMDHI)
            list[index].operator_text = operatorMap[element.operator] || ''
            list[index].is_copyable_text = element.is_copyable ? '是' : '否'
        }
        return {
            "success": true,
            "message": "string",
            "content": {
                "size": 0,
                "records": list,
                "current": 0,
                "pages": 0,
                "total": 0
            },
            "options": {
                "additionalProp1": {},
                "additionalProp2": {},
                "additionalProp3": {}
            }
        }
    } catch (error) {
        console.log("error", error)
    }
    
    // return {
    //     "success": true,
    //     "message": "string",
    //     "content": {
    //         "size": 0,
    //         "records": tableData,
    //         "current": 0,
    //         "pages": 0,
    //         "total": 0
    //     },
    //     "options": {
    //         "additionalProp1": {},
    //         "additionalProp2": {},
    //         "additionalProp3": {}
    //     }
    // }
}

const created = () => {

}

</script>
<style lang="scss" scoped>
	.space-auth-container {
        
    }
</style>
<style lang="scss">
    .space-auth-status-tip {
        max-width: 300px;
    }
	.space-auth-container {
        .auth-list {
            .top {
                padding: 0;
            }
            .tableCon {
                line-height: 20px;
                padding: 15px 0 0 0;
                th {
                    background-color: #F3F4F6 !important;
                    color: #94979E !important;
                }
            }
            .el-table th.el-table__cell>.cell{
                font-size: 12px !important;
                font-weight: 500;
                color: #94979E;
            }
            .el-table td.el-table__cell>.cell{
                font-size: 13px;
                font-weight: 400;
                color: #343333;
            }
            .el-button.el-button--text {
                font-size: 13px;
                font-weight: 400;
                color: #088D9E;
            }
        }
    }
</style>